.left_nav {
  padding: 40px 0;
  height: 100%;
  width: 80px;
  float: left;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06);

  ul {
    li {
      text-align: center;
      margin-bottom: 26px;

      a {
        color: #636d7e;

        img {
          width: 36px;
          height: 36px;
          margin-bottom: 2px;

          &:nth-of-type(1) {
            display: none;
          }

          &:nth-of-type(2) {
            display: inline-block;
          }
        }

        &.active {
          color: @primary-color;
          font-weight: 700;

          img {
            &:nth-of-type(1) {
              display: inline-block;
            }

            &:nth-of-type(2) {
              display: none;
            }
          }
        }
      }

      &:hover {
        opacity: 0.8;
      }
    }
  }
}
